<template>
  <span>
    <div>
      <div class="company-container">
        <div class="company-introduction">
          <div class="platform-wrap">
            <ul class="platform-wrap-list" id="about_news">
              <li :style="'background:url('+notice+') top left no-repeat'" v-for="(item,index) in msg" :key="index" @click="xx(item.id)">
                <div>
                  <p onclick="showContent(42)">{{item.title}}<small>{{item.created_at}}</small></p>
                </div>
              </li>
              <li></li>              
            </ul>
            <!-- <div id="page" class="page_div"><a id="firstPage">首页</a><a id="prePage">上一页</a><a class="current">1</a><a>2</a><a id="nextPage">下一页</a><a id="lastPage">尾页</a></div> -->
          </div>
        </div>
      </div>
    </div>
  </span>
</template>

<script>
import Axios from "@/common/js/Axios";

export default {
  mounted(){
    this.getMsg();    
  },
  data() {
    return {
      //图片开始
      notice : require('@/assets/forme/images/notice.png'),
      token:localStorage.getItem("Authorization"),
      //图片结束
      msg:[]
    };
  },
  components: {},
  methods:{
    xx(x) {
      Axios.getAxios("/api/parkdetail/", {
        id:x
      },{
          Authorization: "Bearer " + this.token
      }).then(
        res => {
          this.$alert(res.data.msg.title, res.data.msg.announcement, {
            dangerouslyUseHTMLString: true
          });
        },
        err => {
          console.log(err);
        }
      );
    },
    getMsg() {
      Axios.getAxios("/api/park/", {
      },{
          Authorization: "Bearer " + this.token
      }).then(
        res => {
          this.msg = res.data.msg
        },
        err => {
          console.log(err);
        }
      );
    }
  }
};
</script>

<style lang="stylus" scoped>
	.page_div {
        margin:0 auto;
				margin-top: 20px;
				margin-bottom: 20px;
				font-size: 15px;
				font-family: "microsoft yahei";
				color: #666666;
				margin-right: 10px;
				padding-left: 20px;
				box-sizing: border-box;
                width:560px;    
                text-align:center;           
			}
			/*
			 * é¡µæ•°æŒ‰é’®æ ·å¼
			 */
			.page_div a {
				min-width: 30px;
				height: 28px;
				border: 1px solid #dce0e0!important;
				text-align: center;
				margin: 0 4px;
				cursor: pointer;
				line-height: 28px;
				color: #666666;
				font-size: 13px;
				display: inline-block;
                text-decoration:none;
			}
			#firstPage,
			#lastPage {
				width: 50px;
				color: #f00;
				border: 1px solid #f00!important;
			}
			#prePage,
			#nextPage {
				width: 70px;
				color: #f00;
				border: 1px solid #f00!important;
			}
			.page_div .current {
				background-color: #f00;
				border-color: #f00;
				color: #FFFFFF;
			}
			.totalPages {
                display:inline-block;
				margin:10px 10px;
			}
			.totalPages span,
			.totalSize span {
				color: #f00;
				margin: 0 5px;
			}
.news-wrap {
  margin: 40px 0;
}
.news-wrap .news-wrap-list {
  border-bottom: 2px solid #e5e5e5;
}
.news-wrap .news-wrap-list li {
  overflow: hidden;
  margin-bottom: 35px;
}
.news-wrap .news-wrap-list li div.news-wrap-right {
  width: 880px;
}
.news-wrap .news-wrap-list li p a {
  font-size: 20px;
  color: #333;
}
.news-wrap .news-wrap-list li p a:hover {
  color: #004e98;
  text-decoration: underline;
}
.news-wrap .news-wrap-list li small {
  display: block;
  margin: 15px 0 20px 0;
}
.news-wrap .news-wrap-list li span {
  display: block;
  font-size: 15px;
  color: #999;
}
.page-list {
  display: block;
  text-align: right;
  color: #333;
  font-size: 12px;
  margin-top: 30px;
}
.page-list a {
  color: #333;
  border: 1px solid #c2c2c2;
  box-shadow: 0px 0px 2px #fff inset;
  background: linear-gradient(to bottom, #fcfcfc, #e7e7e7);
  padding: 5px 7px;
  margin-left: 5px;
}
.platform-wrap .platform-wrap-list {
  box-shadow: 0px 0px 10px #f3f3f3;
  margin-top: 25px;
  padding: 50px 70px 50px 30px;
}
.platform-wrap-list li {
//   background: url('../images/newimages/notice.png') top left no-repeat;
  margin-bottom: 65px;
}
.platform-wrap-list li div {
  padding-left: 60px;
  padding-top: 7px;
  padding-bottom: 14px;
}
.platform-wrap-list li p {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
}
.platform-wrap-list li p small {
  float: right;
  font-weight: normal;
}
.platform-wrap-list li span {
  display: block;
  margin-top: 20px;
  font-size: 15px;
  color: #999;
}
</style>

